<template>
  <div class="boxs">
    <el-card>
      <div class="flex_between">
        <span>{{$t('review.templateType')}}</span>
        <el-button
          icon="el-icon-plus"
          type="primary"
          plain
          size="small"
          @click="openDialog"
          >{{$t('review.Add')}}</el-button
        >
      </div>

      <el-table
        border
        :data="moreArr"
        style="margin-top: 15px"
        v-loading="loading"
      >
        <el-table-column label="index" align="center" width="100" type="index" />
        <el-table-column :label="$t('review.Type')" align="center" prop="comment_type">
          <template slot-scope="scope">
            {{ scope.row.comment_type }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('review.operate')" align="center" width="300">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >{{$t('review.Edit')}}</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >{{$t('review.Delete')}}</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.page"
        :limit.sync="queryParams.size"
        @pagination="getMore"
      />
    </el-card>

    <el-dialog :title="$t('review.operate')" :visible.sync="dialogVisible" width="40%">
      <el-form
        class="demo-form-inline"
        label-width="150px"
        :model="form"
        :rules="rules"
        ref="ruleForm"
      >
        <el-form-item :label="$t('review.templateType')" prop="comment_type">
          <el-input v-model="form.comment_type" :placeholder="$t('review.templateType')" />
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">{{$t('review.close')}}</el-button>
        <el-button :type="form.id ? 'warning' : 'primary'" @click="affirm">{{
          form.id ? $t('review.confirm') : $t('review.confirm')
        }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>
  <script>
import { getTemplateTypeList, saveTemplateType,deleteTemplateType } from "@/api/appComment";
export default {
  name: "templateType",
  data() {
    return {
      queryParams: {
        page: 1,
        size: 10,
      },
      total: 0,
      loading: false,
      addLoading: false,
      moreArr: [],
      dialogVisible: false,
      form: {
        comment_type: "",
      },
      search: "",
      rules: {
        comment_type: [
          { required: true, message: "Please enter the type", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    const { package_name } = this.$route.query;
    this.setQueryParams(package_name);
  },
  methods: {
    async getMore() {
      this.loading = true;
      let { data, total } = await getTemplateTypeList(this.queryParams);
      this.loading = false;
      this.moreArr = data;
      this.total = total;
    },
    setQueryParams(package_name) {
      this.queryParams.package_name = package_name;
      this.getMore();
    },

    async affirm() {
      this.form.package_name=this.queryParams.package_name
      this.$refs["ruleForm"].validate(async (valid) => {
        if (!valid) return;
        try {
          this.addLoading = true;
          await saveTemplateType(this.form);
          this.addLoading = false;
          this.$message.success(this.form.id ? "success!" : "success!");
          this.getMore();
          this.dialogVisible = false;
        } catch (e) {
          this.addLoading = false;
        }
      });
    },
    openDialog() {
      this.form = {};
      this.dialogVisible = true;
    },
    handleEdit(i, row) {
      this.form = { ...row };
      this.dialogVisible = true;
    },
    handleDelete(index, row) {
      this.$confirm(this.$t('review.deleteText1'), this.$t('review.deleteText2'), {
        confirmButtonText: this.$t('review.confirm'),
        cancelButtonText: this.$t('review.close'),
        type: "error",
      }).then(async () => {
        await deleteTemplateType({ id: row.id });
        this.getMore();
        this.$message({
          message: "success!",
          type: "success",
        });
      });
    },
  },
};
</script>
  <style lang="scss" scoped>
.boxs {
  padding: 20px;
}
</style>
  